<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Watch Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id='example'>
        厘米：<input type="text" v-model="cm">
        米：<input type="text" v-model="m">
    </div>
    <p id="info"></p>
    <script type = "text/javascript">
        var vm = new Vue({
            el : '#exmple',
            data : {
                cm : 0,
                m : 0
            },
            methods : {},
            comluted : {},
            watch : {
                cm : function(val) {
                    this.cm = val;
                    this.m = val / 100;
                },
                m : function(val) {
                    this.m = val;
                    this.cm = val * 100;
                }
            }
        });
        vm.$watch('cm',function(newval,oldval) {
            document.getElementById("info").innerHTML = "修改前的值：" + oldval + "，修改后的值：" + newval;
        })
    </script>
</body>
</html>